<template>
  <div class="OctopusBottomBar">
    <van-tabbar v-model="active" v-bind:border="false" v-bind:class="octopus.passport.bangs?'isBangs':''" :safe-area-inset-bottom="false">
      <van-tabbar-item name="Home" to="/APP/Epidemic/Location/Page">
        <van-icon class="icona-shouyehuise-01" class-prefix='iconfont' slot="icon" slot-scope="props"></van-icon>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item name="Message" :info="sensorInfoCount" to="/APP/Epidemic/MessageCenter/Page">
        <van-icon class="iconxiaoxizhongxinhuise-01" class-prefix='iconfont' slot="icon" slot-scope="props"></van-icon>
        <span>消息中心</span>
      </van-tabbar-item>
      <van-tabbar-item name="Work" to="/APP/Epidemic/Workbench/Home/Page">
        <van-icon class="icongongzuotai" class-prefix='iconfont' slot="icon" slot-scope="props"></van-icon>
        <span>工作台</span>
      </van-tabbar-item>
      <van-tabbar-item name="Healthy" to="/APP/Epidemic/User/Healthy/Page">
        <van-icon class="iconjiankang" class-prefix='iconfont' slot="icon" slot-scope="props"></van-icon>
        <span>健康管理</span>
      </van-tabbar-item>
      <van-tabbar-item name="Mine" to="/APP/Epidemic/User/Home/Page">
        <van-icon class="iconwodehuise-01" class-prefix='iconfont' slot="icon" slot-scope="props"></van-icon>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    name: 'MenuEngine', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        active: "Home",
        sensorInfoCount: 3,
      }
    },
    created: function () {
      // this.init();
    },
    updated: function () {
      this.octopus.tips.debug("[AppMenuEngine执行了updated事件。");
    },
    // 活动事件，写在这里的好处是不管是第一次创建还是后退回来，都会触发这个事件
    // 比较典型的就是列表组件，返回的时候往往是需要刷新的。
    activated: function () {
      this.load();
    },
    // 组件停用时，也就是切换出去的时候，需要注意的是，AppMenuEngine组件切换出去，不允许缓存，需要释放到初始状态，以便于下次进来。
    deactivated: function () {
      // this.destroyData();
      this.octopus.tips.debug("AppMenuEngine执行了deactivated事件。");
    },
    computed: {
      // 如果cellData数据发生了改变,则触发这个事件。
      changeCell: function () {
        return this.source.id;
      },
      changePage: function () {

      }
    },
    methods: {
      // 测试vant调用摄像头
      load: function () {

        let modelurl = this.octopus.router.get().fullPath.toLocaleLowerCase();
        console.log(modelurl);
        if (modelurl.indexOf("/epidemic/location/page") > -1) {
          this.active = "Home";
        } else if (modelurl.indexOf("/epidemic/messagecenter/page") > -1) {
          this.active = "Message";
        } else if (modelurl.indexOf("/epidemic/workbench/home/page") > -1) {
          this.active = "Work";
        } else if (modelurl.indexOf("/epidemic/user/healthy/page") > -1) {
          this.active = "Healthy";
        } else if (modelurl.indexOf("/epidemic/user/home/page") > -1) {
          this.active = "Mine";
        } else {
          this.active = "Mine";
        }
      },
    },
    watch: {},
    props: ["changed"]
  }

</script>
